<template>
  <el-container>
    <el-header>
      <top-bar></top-bar>
      <!-- <div class="top-nav-bar">
        <span>花卉网：你值得一逛</span>
        <div class="function-bar">
          <div>
            <span>你好，Flipped</span>
            <span @click="loginOut">退出</span>
          </div>
          <div>订单查询</div>
          <div>购物车</div>
        </div>
      </div> -->
      <div class="search-box">
        <div class="search-title">
          <span>Huahui 花卉网</span>
          <span>-花之思 只为你-</span>
        </div>
        <!-- <div class="search">
          <el-input v-model="searchInfo" placeholder="商品搜索">
            <template slot="append">搜索</template>
          </el-input>
        </div> -->
      </div>
    </el-header>
    <el-main>
      <div class="goods-box">
        <div class="left-box">
          <div class="goods_info_top_left">
            <div class="goods_image_item">
              <pic-zoom :url="goods_images_thumb[chose_img_pos]" :high-url="goods_images[chose_img_pos]"></pic-zoom>
            </div>
            <div class="pic_zoom_list">
              <ul class="select-img">
                <li v-for="(v,k) in goods_info.goods_images_thumb_200" :key="k" style="height:83px" :class="chose_img_pos==k?'border_color':''" @click="click_silde_img(k)">
                  <el-image
                    style="width:76px;height:83px"
                    :src="v"
                    fit="cover"
                  ></el-image>
                </li>
              </ul>
            </div>
          </div>
        </div>
        <div class="right-box">
          <span class="rb-title">{{ goodsDetail.goodsName }}</span>
          <div class="price">
            <span class="price-txt">售价</span>
            <span class="price-red">¥{{ goodsDetail.price }}</span>
            <div class="price-txt">已售<span style="color: #FF3D12;">{{ goodsDetail.sellNum }}</span>件</div>
          </div>
          <div class="huayu">
            <div class="huayu-item">
              <span class="huayu-label">花语</span>
              <p class="huayu-content">{{ goodsDetail.flowerLanguage }}</p>
            </div>
            <div class="huayu-item">
              <span class="huayu-label">包装</span>
              <p class="huayu-content">{{ goodsDetail.material }}</p>
            </div>
          </div>
          <div class="delivery-item">
            <span class="delivery-label">配送说明</span>
            <div class="delivery-content delivery-range-detail" style="cursor: default;">全国</div>
          </div>
          <!-- <div class="delivery-addr">
            <span class="delivery-label">配送至</span>
            <el-cascader
              v-model="selectedOptions"
              placeholder="请点击选择地址"
              :options="options"
              clearable
              @change="handleChange"
            ></el-cascader>
          </div> -->
          <div class="btn-group">
            <div class="btnAddcart" @click="addcart">
              <i class="el-icon-goods" style="margin-right:10px"></i>
              <span>加入购物车</span>
            </div>
            <div class="btnSoonbuy" @click="buyClick()">
              <span>立即购买</span>
            </div>
          </div>
        </div>
      </div>
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="商品详细" name="goodsDetail">
          <div class="goods-detail">
            <el-image
              v-for="(item,index) in goodsDetailArray"
              :key="index"
              style="width: 750px;"
              :src="item"
              fit="contain"
            ></el-image>
          </div>
        </el-tab-pane>
        <el-tab-pane label="用户留言" name="userEvaluation">
          <div class="user-evaluation-box">
            <div v-for="(item,index) in userEvaluation" :key="index" class="user-evaluation">
              <div class="avatar-name-box">
                <el-avatar :size="50" :src="item.pictureUrl"></el-avatar>
                <span>{{ item.userName }}</span>
              </div>
              <div class="evaluation-info">
                <span class="remark">{{ item.context }}</span>
                <div class="img">
                  <el-image
                    v-for="(self,num) in item.pic"
                    :key="num"
                    style="width: 100px;height:100px"
                    :src="self"
                    fit="cover"
                    :preview-src-list="item.pic"
                  ></el-image>
                </div>
                <span class="time">{{ item.time }}</span>
              </div>
            </div>
          </div>
          <el-pagination
            align="center"
            background
            layout="prev, pager, next"
            :total="total"
            :page-size="6"
            @current-change="handleCurrentChange"
          >
          </el-pagination>
        </el-tab-pane>
      </el-tabs>
    </el-main>
  </el-container>
</template>

<script>
import topBar from '../../components/topBar/index.vue'
import PicZoom from '@/components/home/public/vue-piczoom.vue' // 放大镜组件
export default {
  name: 'GoodsDetail',
  components: {
    PicZoom,
    topBar
  },
  data() {
    return {
      goodsDetail: {},
      activeName: 'goodsDetail',
      goodsDetailArray: [], // 商品信息数组
      userEvaluation: [],
      searchInfo: '', // 搜索条件,
      goods_info: {
        comment_num: 0,
        goods_images_thumb_200: []
      },
      goods_images_thumb: [],
      chose_img_pos: 0,
      goods_images: [],
      options: [],
      selectedOptions: [],
      cityArr: [], // 城市列表
      areaArr: [], // 区县列表
      province: '', // 省
      city: '', // 市
      area: '', // 区县,
      provinceCityArea: '', // 选择器选择的省市区
      total: 0, // 总页数
      page: 1 // 当前页
    }
  },
  created() {
    console.log(this.$route.query)
    this.initDistPicker()
    this.goodsDetail = JSON.parse(this.$route.query.goodsDetail)

    for (const i in this.goodsDetail.pictureUrl[0]) {
      this.goods_images_thumb.push(this.goodsDetail.pictureUrl[0][i])
      this.goods_info.goods_images_thumb_200.push(this.goodsDetail.pictureUrl[0][i])
    }
    const array = JSON.parse(this.goodsDetail.picContext)[0]
    console.log(array)
    for (const i in array) {
      this.goodsDetailArray.push(array[i])
    }
    this.getMessage()
  },
  methods: {
    handleCurrentChange(val) {
      this.page = val
      this.getMessage()
    },
    // 获取留言
    async getMessage() {
      const userEvaluation = []
      const goodsId = this.goodsDetail.id
      const page = this.page
      const pageSize = 6
      const { data } = await this.$api.order.getMessage({ goodsId: goodsId, page: page, pageSize: pageSize })
      this.total = parseInt(data.content.total)
      data.content.list.forEach((item, index) => {
        // var pic = []
        // const obj = JSON.parse(item.pic)[0]
        // pic = Object.values(obj)
        item.pic = JSON.parse(item.pic)
        userEvaluation.push(item)
      })
      this.userEvaluation = userEvaluation
    },
    // 添加购物车
    addcart() {
      // if (this.selectedOptions.length === 0) {
      //   this.$message.error('请选择地址')
      //   return
      // }
      const goodsInfo = {}
      goodsInfo.goodsDetail = this.goodsDetail
      goodsInfo.selectedOptions = this.selectedOptions
      const collect = JSON.parse(window.localStorage.getItem('collect')) || []
      let isCollect = false
      if (collect.length !== 0) {
        collect.forEach((element, index) => {
          if (element.goodsDetail.id == goodsInfo.goodsDetail.id) {
            collect[index].goodsDetail.num += 1
            isCollect = true
          }
        })
      }
      if (!isCollect) {
        goodsInfo.goodsDetail.num = 1
        collect.push(goodsInfo)
      }
      window.localStorage.setItem('collect', JSON.stringify(collect))
      this.$router.push({
        path: '/shoppingCart'
      })
    },
    // 立即购买
    buyClick(id) {
      // if (this.selectedOptions.length === 0) {
      //   this.$message.error('请选择地址')
      //   return
      // }
      const multipleSelection = []
      // multipleSelection.push(this.goodsDetail)
      const obj = {}
      obj.goodsDetail = this.goodsDetail
      multipleSelection.push(obj)
      console.log(multipleSelection)
      this.$router.push({ // 核心语句
        path: '/pay', // 跳转的路径
        query: { // 路由传参时push和query搭配使用 ，作用时传递参数
          multipleSelection: JSON.stringify(multipleSelection),
          isPayNow: true
        }
      })
    },
    handleClick(tab, event) {
      console.log(tab, event)
    },
    // 获取地址数据
    initDistPicker() {
      console.log('initDistrictsPicker')
      const respones = require('../../assets/js/districts.json')
      const self = this
      const distData = respones
      const options = []
      // 省
      for (var provinceKy in distData['100000']) {
        const optProvinceItem = {
          value: provinceKy,
          label: distData['100000'][provinceKy]
        }
        if (distData[provinceKy]) {
          // 市
          for (var cityKy in distData[provinceKy]) {
            optProvinceItem.children = optProvinceItem.children
              ? optProvinceItem.children
              : []
            const optCityItem = {
              value: cityKy,
              label: distData[provinceKy][cityKy]
            }
            if (distData[cityKy]) {
              // 区
              for (var areaKy in distData[cityKy]) {
                optCityItem.children = optCityItem.children
                  ? optCityItem.children
                  : []
                const optAreaItem = {
                  value: areaKy,
                  label: distData[cityKy][areaKy]
                }
                optCityItem.children.push(optAreaItem)
              }
            }
            optProvinceItem.children.push(optCityItem)
          }
        }
        options.push(optProvinceItem)
      }
      self.distData = distData
      self.options = options
    },
    // 选择地区
    handleChange(value) {
      const self = this
      console.log('value=>', value)
      // 获取省名
      self.options.map((item, index) => {
        if (item.value == value[0]) {
          self.cityArr = item.children // 存储城市列表
          self.province = item.label
        }
      })
      // 获取市名
      self.cityArr.map((item, index) => {
        if (item.value == value[1]) {
          self.areaArr = item.children // 存储区县列表
          self.city = item.label
        }
      })
      // 获取区县名
      self.areaArr.map((item, index) => {
        if (item.value == value[2]) {
          self.area = item.label
        }
      })
      self.provinceCityArea = self.province + self.city + self.area
      console.log('self.provinceCityArea', self.provinceCityArea)
    },
    // 点击缩略图幻灯片图片
    click_silde_img: function(e) {
      console.log(e)
      this.chose_img_pos = e
    }
  }
}
</script>
<style lang="scss">
.el-container{
  width: 100%;
  height: 100%;
  min-width: 1200px;
  .el-header{
    display: flex;
    flex-direction: column;
    padding: 0;
    height: auto !important;
    min-width: 1500px;
    .top-nav-bar{
      display: flex;
      justify-content: space-between;
      align-items: center;
      background-color: #f1f3f6;
      color: #666e73;
      font-size: 12px;
      line-height: 40px;
      padding: 0 25%;
      .function-bar{
          display: flex;
          justify-content: flex-start;
          div{
              margin-right: 50px;
              span{
                  margin-right: 5px;
              }
          }
      }
    }
    .search-box{
      width: 1200px;
      display: flex;
      align-items: center;
      padding:20px 0 20px 0px;
      margin: 0 auto;
      .search-title{
        display: flex;
        flex-direction: column;
        color: #fd684a;
        margin-right: 50px;
        align-items: center;
        span:nth-child(1){
          font-size: 35px;
        }
        span:nth-child(2){
          color: #f8bcae;
          font-size: 18px;
        }
      }
      .search{
        width: 500px;
        ::v-deep .el-input__inner{
        border-color: #fd684a !important;
        }
        ::v-deep  .el-input-group__append{
          background-color: #fd5e40 !important;
          color: white;
          border-color: #fd5e40;
        }
      }
    }
  }
  .el-main{
    display: flex;
    flex-direction: column;
    .goods-box{
      width: 1200px;
      min-width: 1200px;
      margin: 0 auto;
      .left-box{
        .goods_info_top_left{
          width: 402px;
          border: 1px solid #efefef;
          margin-right: 28px;
          float: left;
          box-sizing: border-box;
          .goods_image_item{
            width: 400px;
            height: 400px;
            display: block;
            border-bottom: 1px solid #efefef;
          }
          .pic_zoom_list{
            display: flex;
            align-items: center;
            justify-content: center;
            .select-img{
              display: flex;
              align-items: center;
              overflow-x: auto;
            }
            ul li{
              list-style-type: none;
              float: left;
              margin:10px 10px 10px 0;
              border:1px solid #efefef;
            }
            ul li:hover{
              border-color:#ca151e;
            }
            ul li:last-child{
              margin-right: 0;
            }
            ul li.border_color{
              height: 83px;
              border-color:#ca151e;
            }
            .pic_zoom_list_left{
              font-size: 24px;
              float: left;
              line-height: 80px;
              color:#666;
              margin-right: 10px;
              margin-left: 10px;
              :hover{
                  color:#ca151e;
              }
            }
            .pic_zoom_list_right{
              font-size: 24px;
              float: right;
              line-height: 80px;
              color:#666;
              margin-right: 10px;
              margin-left: 10px;
              :hover{
                  color:#ca151e;
              }
            }
          }
        }
      }
      .right-box{
        display: flex;
        flex-direction: column;
        flex: 1;
        .rb-title{
          font-size: 22px;
          line-height: 22px;
          color: #232628;
          font-weight: bold;
        }
        .price{
          position: relative;
          margin-top: 12px;
          padding: 10px 0;
          background: #F3F5F7;
          border-radius: 8px 8px 0px 0px;
          display: flex;
          justify-content: space-between;
          padding: 20px 15px;
          .price-red{
            display: inline-block;
            font-size: 30px;
            line-height: 30px;
            color: #FF3D12;
            font-weight: bold;
          }
          .price-txt{
            line-height: 18px;
            font-size: 12px;
            color: #232628;
          }
        }
        .huayu{
          padding: 12px 0;
          border-radius: 0px 0px 8px 8px;
          border-bottom: 1px solid #e3e8ec;
          .huayu-item{
            display: flex;
            margin: 10px 0;
            .huayu-label{
              display: inline-block;
              width: 80px;
              padding-left: 12px;
              font-size: 13px;
              line-height: 18px;
              color: #71797F;
              vertical-align: top;
            }
            .huayu-content{
              display: inline-block;
              width: 580px;
              font-size: 13px;
              line-height: 18px;
              color: #232628;
              vertical-align: top;
              text-align: justify;
              padding-right: 36px;
            }
          }
        }
        .delivery-item{
          display: flex;
          margin: 10px 0;
          .delivery-label {
            width: 80px;
            padding-left: 12px;
            color: #71797F;
          }
          .delivery-range-detail {
            position: relative;
            width: 560px;
            max-height: 24px;
            overflow: hidden;
          }
          .delivery-content {
            color: #232628;
          }
        }
        .delivery-addr{
          display: flex;
          align-items: center;
          .delivery-label{
            width: 80px;
            padding-left: 12px;
            color: #71797F;
          }
          .el-cascader{
            width: 220px;
            color: #71797F !important;
          }
        }
        .btn-group{
          display: flex;
          margin-top: 30px;
          .btnAddcart{
            width: 200px;
            height: 56px;
            line-height: 56px;
            text-align: center;
            color: #FF734C;
            line-height: 54px;
            border: 1px solid rgba(255, 115, 76, 0.2);
            background: #FFF0EC;
            border-radius: 28px;
            font-size: 22px;
            font-weight: bold;
            margin-right: 30px;
          }
          .btnSoonbuy {
            width: 200px;
            height: 56px;
            line-height: 56px;
            text-align: center;
            color: #fff;
            line-height: 56px;
            background: #FF734C;
            background: -webkit-gradient(linear, left top, right top, from(#ff734c), to(#ff3d12));
            background: -webkit-linear-gradient(left, #ff734c 0%, #ff3d12 100%);
            background: -o-linear-gradient(left, #ff734c 0%, #ff3d12 100%);
            background: linear-gradient(90deg, #ff734c 0%, #ff3d12 100%);
            border-radius: 28px;
            font-size: 22px;
            font-weight: bold;
          }
        }
      }
    }
    .el-tabs{
      width: 1200px;
      min-width: 1200px;
      margin: 50px auto;
      .el-tabs__nav-wrap{
        padding-left: 20px;
        background-color: #f3f5f7 !important;
        .el-tabs__active-bar{
          background-color: #fd7454;
        }
      }
      .is-active{
        color: #fd7454;
      }
      .goods-detail{
        width: 1200px;
        min-width: 1200px;
        margin: 10px 0;
        display: flex;
        flex-direction: column;
        align-items: center;
      }
      .user-evaluation-box{
        display: flex;
        flex-direction: column;
        .user-evaluation{
          display: flex;
          .avatar-name-box{
            display: flex;
            align-items: center;
            justify-content: flex-start;
            span{
              display: inline-block;
              vertical-align: middle;
              width: 100px;
              font-size: 13px;
              line-height: 18px;
              color: rgba(35, 38, 40, 0.7);
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
              margin-left: 10px;
            }
          }
          .evaluation-info{
            display: flex;
            flex-direction: column;
            margin: 10px 0;
            .remark{
              font-size: 13px;
              line-height: 18px;
              color: #232628;
            }
            .img{
              display: flex;
              margin: 5px 0;
              .el-image{
                margin: 0 5px;
              }
            }
            .time{
              font-size: 12px;
              color: #B4BABF;
            }
          }
        }
      }
    }
  }
}
</style>
